<template>
    <div id="UserView">
<!--        <a-form :model="queryForm" layout="inline" style="width: 100%;background-color: white">-->
<!--            <a-form-item field="title" label="用户名" style="min-width: 240px">-->
<!--                <a-input v-model="queryForm.userName" placeholder="请输入用户名"/>-->
<!--            </a-form-item>-->
<!--            <a-form-item field="tags" label="手机号" style="min-width: 240px">-->
<!--                <a-input v-model="queryForm.userPhone" placeholder="请输入手机号"/>-->
<!--            </a-form-item>-->
<!--            <a-form-item>-->
<!--                <a-button type="primary" @click="doSubmit">搜索</a-button>-->
<!--            </a-form-item>-->
<!--        </a-form>-->
        <a-divider size="0" />
        <a-table
                :ref="tableRef"
                :columns="columns"
                :data="dataList"
        >
            <template #userAvatar="{ record }">
                <img width="30" height="30" :src=record.userAvatar alt="">
            </template>
            <template #createTime="{ record }">
                {{
                moment(record.createTime).format("YYYY-MM-DD")
                }}
            </template>
            <template #optional="{ record }">
                <a-space>
                    <a-button type="primary" status="success" size="mini" shape="circle">
                        <icon-refresh />
                    </a-button>
                    <a-button type="primary" status="danger" size="mini" shape="circle">
                        <icon-lock />
                    </a-button>
                </a-space>
            </template>
        </a-table>
    </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";

import {UserLoginInfo} from "../type/user";
import {getList} from "../service/user.ts";
import moment from "moment/moment";
import {IconLock, IconRefresh, IconFire} from "@arco-design/web-vue/es/icon";

const queryForm = ref({
    userName:"",
    userPhone:"",
})

const tableRef = ref();

const dataList = ref<UserLoginInfo[]>([]);

const columns = [
    {
        title: "ID",
        dataIndex: "id",
    },
    {
        title: "用户头像",
        slotName: "userAvatar",
    },
    {
        title: "手机号",
        dataIndex: "userPhone",
    },
    {
        title: "用户名",
        dataIndex: "userName",
    },

    {
        title: "角色组",
        dataIndex: "userRole",
    },
    {
        title: "注册时间",
        slotName: "createTime",
    },
    {
        slotName: "optional",
    },
];

const loadData = async () => {
    const res = await getList();
    dataList.value = res.data;
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
    loadData();
});

const doSubmit = () => {

}


</script>

<style scoped></style>
